<template>
  <div class="content">
    <div class="category">
      <div :class="{category_item:true, 'category_item--active':currentTab===item.tab} "
           v-for="item in categoryries"
           :key="item.name"
           @click="()=>handleTabClick(item.tab)"
      >{{ item.name }}
      </div>
    </div>
    <div class="product">
      <div class="product_item"
           v-for="item in list"
           :key="item._id"
      >
        <img class="product_item_img" :src="item.imgUrl">
        <div class="product_item_detail">
          <h4 class="product_item_title">{{ item.name }}</h4>
          <p class="product_item_sales">月售{{ item.sales }}件</p>
          <p class="product_item_price">
            <span class="product_item_yen">&yen;</span>{{ item.price }}
            <span class="product_item_origin">&yen; {{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="product_number">
          <span class="product_number_minus"
                @click="()=>{changeCartItem(shopId,item._id,item,-1,shopName)}">-</span>
                    {{ cartList?.[shopId]?.productList?.[item._id]?.count || 0 }}
<!--          {{ getProductCartCount(shopId, item._id) }}-->
          <span class="product_number_plus" @click="()=>{changeCartItem(shopId,item._id,item,1,shopName)}">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { get } from '@/utils/request'
import { useCommonCartEffect } from '@/effect/cartEffects'
import { useStore } from 'vuex'

const categoryries = [
  {
    name: '全部商品',
    tab: 'all'
  }, {
    name: '新鲜水果',
    tab: 'seakKill'
  }, {
    name: '休闲食品',
    tab: 'fruit'
  }
]
// 和tab切换逻辑
const useTabEffect = () => {
  const currentTab = ref(categoryries[0].tab)
  const handleTabClick = (tab) => {
    currentTab.value = tab
  }
  return {
    currentTab,
    handleTabClick
  }
}
// 列表类容逻辑
const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] })
  const getContentData = async () => {
    const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab.value })
    if (result?.code === 2000) {
      content.list = result.data
    }
  }
  watchEffect(() => {
    getContentData()
  })
  const { list } = toRefs(content)
  return { list }
}
const useCartEffect = (shopId) => {
  const store = useStore()
  const { cartList, changeCartItemInfo } = useCommonCartEffect(shopId)
  const changShopName = (shopId, shopName) => {
    store.commit('changShopName', {
      shopId,
      shopName
    })
  }
  const changeCartItem = (shopId, productId, item, number, shopName) => {
    changeCartItemInfo(shopId, productId, item, number)
    changShopName(shopId, shopName)
  }
  const getProductCartCount = (shopId, productId) => {
    return cartList?.[shopId]?.productList?.[productId]?.count || 0
  }
  return {
    cartList,
    changeCartItem,
    getProductCartCount
  }
}

export default {
  name: 'Content',
  props: ['shopName'],
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { currentTab, handleTabClick } = useTabEffect()
    const { list } = useCurrentListEffect(currentTab, shopId)
    const { changeCartItem, cartList, getProductCartCount } = useCartEffect(shopId)
    return {
      categoryries,
      currentTab,
      handleTabClick,
      list,
      cartList,
      shopId,
      changeCartItem,
      getProductCartCount
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
@import "../../style/mixins";

.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  bottom: .5rem;
}

.category {
  overflow-y: scroll;
  height: 100%;
  width: .76rem;
  background: $search-bgColor;

  &_item {
    line-height: .4rem;
    text-align: center;
    font-size: .14rem;
    color: $content-fontcolor;

    &--active {
      background: #FFF;
    }
  }
}

.product {
  overflow-y: scroll;
  flex: 1;

  &_item {
    position: relative;
    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    border-bottom: .01rem;
    solid: $content-bgColor;

    &_detail {
      overflow: hidden;
    }

    &_img {
      width: .68rem;
      height: .68rem;
      margin-right: .16rem;
    }

    &_title {
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }

    &_sales {
      margin: .06rem 0;
      font-size: .14rem;
      color: $content-fontcolor;
    }

    &_price {
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $hightlight-fontColor;
    }

    &_yen {
      font-size: .12rem;
    }

    &_origin {
      margin-left: .2rem;
      line-height: .2rem;
      font-size: .12rem;
      color: #999;
      text-decoration: line-through;
    }

    .product_number {
      position: absolute;
      right: 0;
      bottom: .12rem;
      line-height: .18rem;

      &_minus,
      &_plus {
        display: inline-block;
        width: .2rem;
        height: .2rem;
        line-height: .16rem;
        border-radius: 50%;
        font-size: .2rem;
        text-align: center;
      }

      &_minus {
        border: .0rem solid #666;
        color: #666;
        margin-right: .1rem;
      }

      &_plus {
        background: #0091FF;
        color: #FFF;
        margin-left: .1rem;
      }
    }
  }
}
</style>
